
<template>
  <!------------------------------------ 采购中心商品图片展示栏 ------------------------------------
    @desc 图片展示
    @author kyle
    @date 2021-04-13
    @props
      model     ———— 商品详情数据
  -->
  <div class="img-box">
    <div v-show="productImgList" class="mt-20  flex-s-c img-list">
      <img-box v-for="(item,index) in productImgList" :key="index" class="item-img-box" :img-url="item" />
    </div>
  </div>
</template>

<script>
import imgBox from 'components/imgBox'
export default {
  name: 'PurchaseImgBox',
  components: {
    imgBox
  },
  props: {
    model: { // 数据
      type: Object,
      required: true,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      evaluateShow: false
    }
  },
  computed: {
    productImgList() {
      // 图片数据整理
      const _productImg = this.model.ProductImg
      const _imgUrl = this.model.ImageUrl
      let _imgList = []
      if (_imgUrl) {
        _imgList = _imgUrl.split(',')
        if (_imgList.length === 1) {
          _imgList.push(_imgList[0])
        }
        if (_productImg) {
          // 将主图放在第二位
          _imgList.splice(1, 0, _productImg)
        } else if (_imgList.length === 2) {
          _imgList.push(_imgList[0])
        }
      } else if (_productImg) {
        _imgList = [_productImg, _productImg, _productImg]
      } else {
        _imgList = ['', '', '']
      }
      return _imgList
    }
  }

}
</script>

<style lang="scss" scoped>
.img-box{
  width: 100%;
  overflow-x: scroll;
  .img-list{
    .item-img-box {
    transform: translateX(-360px);
      width: 480px;
      height: 480px;
      display: inline-block;
      flex-shrink: 0;
      flex-grow: 0;
      border-radius: 12px;
      margin-right: 12px;
      overflow: hidden;
      &:last-child{
        margin-right: 0;
      }
    }
  }
}
</style>
